<template>
	<view class="my-page flex flex-column h-100">
		<view class="fs-32 text-white text-center py-2">我的</view>
		<view class="flex align-center my-top mx-3" v-if="getUser">
			<image v-if="getUser.img" class="avatar rounded-circle mr-2 border" :src="getUser.img" mode="aspectFill"></image>
			<image v-else class="avatar rounded-circle mr-2" src="/static/images/avatar.jpg" mode="widthFix"></image>
			<view class="flex flex-column text-white">
				<view class="flex fs-32 align-end mb-1">
					<text v-if="getUser.cmrz.name">{{getUser.cmrz.name}}</text>
					<view class="flex align-center fs-24 ftcolor5 ml-1">
						<u-icon name="phone" color="rgba(255, 255, 255, 0.6)" size="28"></u-icon>
						<text class="fs-24 ">{{getUser.member_mobile}}</text>
					</view>
				</view>
				<view class="flex align-center fs-24" v-if="getUser.address">
					<u-icon name="map" color="#fff" size="28"></u-icon>
					<text class="ml-1">地址：{{getUser.address}}</text>
				</view>
			</view>
		</view>
		<view class="bgcolor1 mx-3 rounded p-2 flex-1 mb-4">
			<view class="fs-32 font-weight-bolder ftcolor1 titleLine flex align-center mb-2">我的服务</view>
			<view class="flex align-center py-2 border-bottom" @click="navTo('/pages/my/auth')">
				<image class="icon" src="/static/images/my_icon2.png" mode="widthFix"></image>
				<text class="flex-1 ml-1 fs-24 ftcolor1">村民认证</text>
				<u-icon name="arrow-right" color="#999" size="28"></u-icon>
			</view>
			<view class="flex align-center py-2 border-bottom" @click="navTo('/pages/my/points')">
				<image class="icon" src="/static/images/my_icon1.png" mode="widthFix"></image>
				<text class="flex-1 ml-1 fs-24 ftcolor1">我的积分</text>
				<u-icon name="arrow-right" color="#999" size="28"></u-icon>
			</view>
			<view class="flex align-center py-2" @click="navTo('/pages/my/setup')">
				<image class="icon" src="/static/images/my_icon3.png" mode="widthFix"></image>
				<text class="flex-1 ml-1 fs-24 ftcolor1">系统设置</text>
				<u-icon name="arrow-right" color="#999" size="28"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from  'vuex'
	export default {
		data() {
			return {
				
			}
		},
		computed:{
			...mapGetters(['getUser'])
		},
		methods: {
			navTo(url){
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
.my-page{
	background-image: url('/static/images/my_bg.png');
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100%;
	.my-top{
		padding: 50rpx 0 50rpx;
	}
	.avatar{
		width: 50px;
		height: 50px;
	}
	.icon{
		width: 20px;
		height: 20px;
	}
}
</style>
